<template>
  <div class="user">
    <basic-container>
      <avue-crud
        :option="option"
        ref="crud"
        v-model="form"
        :page="page"
        @on-load="getList"
        @size-change="sizeChange"
        @current-change="currentChange"
        :table-loading="listLoading"
        @search-change="handleFilter"
        @refresh-change="handleRefreshChange"
        :before-open="handleOpenBefore"
        @search-reset="handleRefreshChange"
        @row-update="update"
        @row-save="create"
        @row-del="del"
        :data="list"
      >
        <template slot="menu" slot-scope="scope">
          <el-button
            class="filter-item"
            @click="$refs.crud.rowEdit(scope.row)"
            type="text"
            v-if="scope.row.status === 2"
            icon="el-icon-edit"
            >编辑
          </el-button>
          <el-button
            class="filter-item"
            @click="$refs.crud.rowDel(scope.row)"
            type="text"
            v-if="scope.row.status === 2"
            icon="el-icon-delete"
            >删除
          </el-button>
          <!-- <el-button
            class="filter-item"
            @click="handelConfirm(scope.row)"
            type="text"
            v-if="scope.row.status === 24"
            icon="el-icon-check"
            >确认收款({{scope.row.sell_method===1?'支付宝':scope.row.sell_method===2?'微信':'银行卡'}})
          </el-button> -->
          <el-button
            class="filter-item"
            @click="handelBack(scope.row)"
            type="text"
            v-if="scope.row.status === 25"
            icon="el-icon-folder-opened"
            >回购
          </el-button>
          <el-button
            class="filter-item"
            @click="recommend(scope.row)"
            type="text"
            v-if="scope.row.recommend === 0"
            icon="el-icon-thumb"
            >推荐
          </el-button>
          <el-button
            class="filter-item"
            @click="recommend(scope.row)"
            type="text"
            v-if="scope.row.recommend === 1"
            icon="el-icon-thumb"
            >取消推荐
          </el-button>
        </template>
        <template slot="type" slot-scope="scope">
          <el-switch
            :value="Boolean(scope.row.type === 2)"
            @change="changeFlag(scope.row.type, scope.row.id)"
            active-color="#ff4949"
            inactive-color="#13ce66"
            v-if="scope.row.status === 13"
          >
          </el-switch>
          <div v-else>--</div>
        </template>
      </avue-crud>
    </basic-container>
    <el-dialog
      title="选择付款方式"
      class="payMethod"
      :visible.sync="dialogPayMethod"
      width="30%">
      <el-radio-group v-model="payform" size="small">
        <el-radio :label="item.type" border v-for="(item,i) in payoption" :key="i">
          <div class="payContent">
            <div class="pay_title">
              {{item.type===1?'支付宝':item.type===2?'微信':'银行卡'}}
            </div>
            <div class="txt">
              姓名：{{item.name}}
            </div>
            <div class="txt" v-if="item.type === 3">
              开户银行：{{item.label}}
            </div>
            <div class="txt" v-if="item.type === 3">
              开户支行：{{item.zhihang}}
            </div>
            <div class="txt">
              {{item.type===1?'支付宝':item.type===2?'微信':'银行卡'}}账号：{{item.content}}
            </div>
            <div class="txt code" v-if="item.type !== 3">
              <img :src="item.pic" class="img"></img>
            </div>
          </div>
        </el-radio>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogPayMethod = false">取 消</el-button>
        <el-button type="primary" @click="handlePayConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList, putObj, delObj, updateDomain, paySuccess, getPayMethod } from "@/api/admin/orderCreate";
import { tableOption } from "@/const/crud/admin/orderCreate";
import { mapGetters } from "vuex";

export default {
  name: "table_user",
  data() {
    return {
      option: tableOption,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条,
        isAsc: false //是否倒序
      },
      list: [],
      listLoading: true,
      dialogPayMethod: false,
      payTypeId: 0,
      form: {},
      payform: {},
      payoption: []
    };
  },
  computed: {
    ...mapGetters(["permissions"])
  },
  created() {
  },
  methods: {
    getList(page, params) {
      this.listLoading = true;
      fetchList(
        Object.assign(
          {
            page: page.currentPage,
            size: page.pageSize
          },
          params
        )
      ).then(response => {
        this.list = response.data.data.data;
        this.page.total = response.data.data.count || '0';
        this.listLoading = false;
      });
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getList(this.page);
    },
    currentChange(current) {
      this.page.currentPage = current;
      this.getList(this.page);
    },
    handleFilter(param, done) {
      this.page.currentPage = 1;
      this.getList(this.page, param);
      done();
    },
    handleRefreshChange() {
      this.getList(this.page);
    },
    handleOpenBefore(show, type) {
      show();
    },
    goWhios(row){
      console.log(row)
      // https://www.ggcx.com/main/integrated?domain=fcd.com
    },
    changeFlag(status, id) {
      let num;
      if (status === 1) {
        num = 2;
      } else {
        num = 1;
      }
      updateDomain({ type: num, id: id }).then(res => {
        this.getList(this.page);
        this.$notify.success("操作成功");
      });
    },
    handleUpdate(row, status) {
      auditDomain({id: row.id, status: status}).then(res=>{
        this.getList(this.page);
        this.$notify.success("操作成功");
      })
    },
    handelBack(row){
      getPayMethod({user: row.sell_id}).then(res=>{
        this.payTypeId = row.id
        this.payoption = res.data.data
        this.dialogPayMethod = true
      })
    },
    handlePayConfirm(){
      if(typeof this.payform !== 'number'){
        this.$notify.error("请选择");
        return
      }
      paySuccess({id: this.payTypeId, type: 'huigou', pay: this.payform}).then(res=>{
        this.getList(this.page);
        this.dialogPayMethod = false
        this.$notify.success("操作成功");
      })
    },
    handelConfirm(row){
      paySuccess({id: row.id, type: 'shoukuan'}).then(res=>{
        this.getList(this.page);
        this.$notify.success("操作成功");
      })
    },
    recommend(row){
      putObj({id:row.id, recommend: row.recommend===1?0:1})
        .then(() => {
          this.getList(this.page);
          done();
          this.$notify.success("修改成功");
        })
        .catch(() => {
          loading();
        });
    },
    create(row, done, loading) {
      putObj(row)
        .then(() => {
          this.getList(this.page);
          done();
          this.$notify.success("创建成功");
        })
        .catch(() => {
          loading();
        });
    },
    update(row, index, done, loading) {
      putObj(this.form)
        .then(() => {
          this.getList(this.page);
          done();
          this.$notify.success("修改成功");
        })
        .catch(() => {
          loading();
        });
    },
    del(row){
      this.$confirm(
        "此操作将永久删除, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        delObj(row.id)
          .then(() => {
            this.getList(this.page);
            this.$notify.success("操作成功");
          })
          .catch(() => {
            this.$notify.error("操作失败");
          });
      });
    },
  }
};
</script>
<style lang="less">
  .payContent {
    margin-top: -2px;
    > div {
      line-height: 20px;
    }
    .img {
      width: 100px;
      height: 100px;
    }
  }
  
</style>